<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;'">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'head.png'" mode="widthFix" class="logo"></image>
				<image :src="imageUrl +'code.png'" mode="widthFix" class="seandcode" :style="'margin-right:'+right+'px;'"></image>
			</view>
		</view>
		<image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
		<view class="card" @click="go">
			<image :src="imageUrl +'bg2.png'" mode="widthFix" class="bg2-img"></image>
			<image :src="imageUrl +'bg3.png'" mode="widthFix" class="bg3-img"></image>
			<image :src="imageUrl +'success.png'" mode="widthFix" class="certification"></image>
			<view class="address-box">
				<image :src="imageUrl +'address.png'" mode="widthFix" class="address-img"></image>
				<view>湖北省</view>
				<image :src="imageUrl +'down.png'" mode="widthFix" class="tab-img"></image>
			</view>
			<view class="cart-box">
				<view class="cart-detail">
					<view class="number">鄂E·12345</view>
					<view class="timing"><text>02</text>小时<text>23</text>分钟</view>
					<view class="time">入场时间:2025-09-03 15:33:33</view>
					<view class="go pay">
						<view>立即支付</view>
						<image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
					</view>
				</view>
			</view>
			<image :src="imageUrl +'cart1.png'" mode="widthFix" class="cart-img"></image>
			<view class="prompt">开通无感支付，体验快捷出场</view>
		</view>
		<view class="classification-box">
			<view class="classification-detail">
				<image :src="imageUrl +'a1.png'" mode="widthFix"></image>
				<view>找车位</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a2.png'" mode="widthFix"></image>
				<view>车辆管理</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a3.png'" mode="widthFix"></image>
				<view>电子发票</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a4.png'" mode="widthFix"></image>
				<view>充电网点</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a5.png'" mode="widthFix"></image>
				<view>联系客服</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a6.png'" mode="widthFix"></image>
				<view>停车缴费</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a7.png'" mode="widthFix"></image>
				<view>月卡办理</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a8.png'" mode="widthFix"></image>
				<view>欠费补缴</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a9.png'" mode="widthFix"></image>
				<view>无感开通</view>
			</view>
			<view class="classification-detail">
				<image :src="imageUrl +'a10.png'" mode="widthFix"></image>
				<view>更多服务</view>
			</view>
		</view>
		<view class="list-head-box">
			<view class="head-title">
				<image :src="imageUrl +'hot.png'" mode="widthFix"></image>
				<view>热点资讯</view>
			</view>
			<view class="look-more">
				<view>查看更多</view>
				<image :src="imageUrl +'left.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="new-list" v-for="(item,index) in 4">
			<view class="new-box">
				<view class="title-name">九三阅兵|纪念中国人民抗日战争暨反法西斯战争胜利80周年大阅兵</view>
				<view class="name-time">
					<view>夷陵城市停车</view>
					<view>5小时前</view>
				</view>
			</view>
			<image :src="imageUrl +'gg.png'" mode="aspectFill"></image>
		</view>
		<view class="null"></view>
		<view class="foot">
			<image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
			<view class="foot-box">
				<view class="box-detail">
					<image :src="imageUrl +'1.png'" mode="widthFix"></image>
					<view class="choice-color">首页</view>
				</view>
				<view class="box-detail">
					<image :src="imageUrl +'2.png'" mode="widthFix"></image>
					<view>资讯</view>
				</view>
				<image :src="imageUrl +'5.png'" mode="widthFix" class="alone"></image>
				<view class="box-detail">
					<image :src="imageUrl +'3.png'" mode="widthFix"></image>
					<view>订单</view>
				</view>
				<view class="box-detail">
					<image :src="imageUrl +'4.png'" mode="widthFix"></image>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right:0
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
			go() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: relative;
		z-index: 999;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.logo {
				margin-left: 40rpx;
				width: 265rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.card {
		width: 670rpx;
		height: 360rpx;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 12rpx;
		box-shadow: 0px 4px 12px rgba(167, 188, 195, 0.6);

		.certification {
			width: 110rpx;
			height: 32rpx;
			position: absolute;
			right: 10rpx;
			top: 26rpx;
		}

		.prompt {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 14rpx;
			font-size: 24rpx;
			color: rgba(40, 40, 40, 0.6);
		}

		.bg2-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
			z-index: 6;
		}

		.bg3-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
		}

		.address-box {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			margin-left: 10rpx;
			position: relative;

			.address-img {
				width: 64rpx;
				height: 64rpx;
			}

			view {
				font-size: 24rpx;
				color: #1C274C;
			}

			.tab-img {
				width: 14rpx;
				height: 14rpx;
			}
		}

		.top1 {
			margin-top: 56rpx;
		}

		.top2 {
			margin-top: 76rpx;
		}

		.cart-box {
			width: 620rpx;
			display: flex;
			justify-content: space-between;
			margin-left: 30rpx;
			position: relative;

			.cart-detail {
				.head-name {
					font-size: 48rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.number {
					font-size: 32rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.timing {
					font-size: 24rpx;
					color: #1C274C;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					text {
						font-size: 42rpx;
						font-weight: 700;
						color: #5ADA7A;
					}
				}

				.time {
					font-size: 20rpx;
					color: rgba(40, 40, 40, 0.6);
				}

				.pay {
					width: 160rpx !important;
					margin-top: 26rpx !important;
				}

				.go {
					width: 136rpx;
					height: 48rpx;
					margin-top: 20rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(to right, #00BBFF, #5ADA7A);

					view {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
					}

					image {
						width: 14rpx;
						height: 14rpx;
					}
				}
			}
		}

		.cart-img {
			width: 300rpx;
			height: 140rpx;
			position: absolute;
			bottom: 90rpx;
			right: 20rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.classification-box {
		width: 720rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;

		.classification-detail {
			width: 20%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			view {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #1C274C;
				line-height: 36rpx;
			}
		}
	}

	.list-head-box {
		width: 690rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.head-title {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			view {
				font-size: 36rpx;
				color: #1C274C;
				font-weight: 700;
			}
		}

		.look-more {
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			view {
				font-size: 26rpx;
				color: rgba(40, 40, 40, 0.6);
				margin-right: 10rpx;
			}
		}
	}

	.new-list {
		width: 690rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;

		.new-box {
			width: 403rpx;
			height: 154rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			margin-left: 20rpx;

			.title-name {
				width: 100%;
				font-size: 32rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name-time {
				width: 100%;
				display: flex;

				view {
					font-size: 24rpx;
					margin-right: 10rpx;
					color: rgba(40, 40, 40, 0.6);
				}
			}
		}

		image {
			width: 220rpx;
			height: 154rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}

	.null {
		width: 750rpx;
		height: 220rpx;
	}

	.foot {
		width: 750rpx;
		height: 198rpx;
		position: fixed;
		bottom: 0;

		.bgfoot-img {
			width: 750rpx;
			height: 198rpx;
		}

		.foot-box {
			width: 650rpx;
			height: 94rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
			display: flex;
			justify-content: space-between;

			.alone {
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
			}

			.box-detail {
				width: 90rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 22rpx;
					color: rgba(40, 40, 40, 0.6);
					line-height: 36rpx;
					margin-top: 10rpx;
					width: 100%;
					text-align: center;
				}

				.choice-color {
					color: #1C274C !important;
				}
			}
		}
	}
</style>